<template>
  <view class="creamDetails">
    <navTabrBack
      :navbackStyle="['padding-right: 20rpx;', 'color: #fff']"
      :title="'专利集详情'"
      :titleStyle="['padding: 0 28rpx;', 'color: #fff']"
    ></navTabrBack>
    <!-- 精品数据头部 -->
    <view class="creamHeader">
      <!-- 作者信息展示 -->
      <view class="creamInfo">
        <image style="flex: none" :src="img + rezlGroup.img" mode="scaleToFill" />
        <view class="creamAuthor">
          <view class="authorTitle"
            ><view class="title">{{ rezlGroup.name }}</view
            ><view
              class="iconfont icon-a-13Bshenglve"
              @click="open(rezlGroup.ID, rezlGroup.status, rezlGroup.name)"
            ></view
          ></view>
          <view class="creamUseName" @click="toUserInfo">
            <image :src="img + rezlGroup.sysUser?.headerImg" />
            <view>{{ rezlGroup.sysUser?.nickName }}</view>
            <!-- <button>+关注</button> -->
          </view>
          <view class="creamTime"><!-- {{ rezlGroup.sysUser. }} --></view>
          <view class="creamTime">{{ rezlGroup.UpdatedAt?.split("T")[0] }}</view>
          <view class="part" @click="upDataItem">{{
            rezlGroup.status == 1 ? "已共享" : "共享"
          }}</view>
        </view>
      </view>
      <!-- 作者简介 -->
      <view class="creamSum"
        >{{ rezlGroup.desc }}
        <view class="creamBtn">
          <!-- 订阅分享按钮 -->
          <button class="myCr"><view class="iconfont icon-dingyue"></view>订阅</button>
          <button
            :class="dataList.length != 0 && rezlGroup.status != 0 ? '' : 'myCr'"
            type="parmay"
            :open-type="dataList.length != 0 && rezlGroup.status != 0 ? 'share' : ''"
          >
            <view class="iconfont icon-zhuanfa"></view>分享
          </button>
        </view>
      </view>
    </view>
    <!-- 专利信息 -->
    <view class="patentOpt">
      <view style="width: 100%" v-show="dataList.length != 0">
        <view class="patentInfo">
          <view class="patentInfoList"><text>专利信息</text>（{{ total }}）</view>
          <view v-if="rezlGroup.status != 1" class="editImfo" @click="checkFlage(!flage)">
            <view class="iconfont icon-zhuanfa"></view>
            <view>批量</view>
          </view>
        </view>
        <view class="creamList">
          <!-- 列表 -->
          <view class="serchItem" v-for="(item, index) in dataList" :key="index">
            <checkbox
              v-show="flage"
              color="#1677FF"
              class="checkCream"
              :checked="isCheck[index]"
              @click="isCheckOk(index)"
            />
            <view class="serchItemIndex">{{ index + 1 }}</view>
            <view>
              <view class="patentTitle" @click="toPatentDetile(item.baseNum)">{{
                item.baseName
              }}</view>
              <!-- <view class="patentClassify">11条，订阅200次</view> -->
            </view>
          </view>
          <!-- 占位 -->
          <view :style="flage ? 'height: 145rpx;' : 'height:0'"></view> </view
      ></view>
      <button class="addPatent" @click="toAddPatentCream" v-show="!flage&&rezlGroup.status != 1">
        添加专利
      </button>
    </view>
  </view>
  <view :class="flage ? 'checkAll' : 'noheight'">
    <view class="isCheckAll"
      ><checkbox
        @click="isCheckAll"
        class="checkCream"
        :checked="checkAll"
        color="#1677FF"
      />全选</view
    >
    <button type="paramy" @click="isOk">删除</button>
  </view>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="message" type="message">
    <uni-popup-message
      type="error"
      message="请勾选需要删除的信息！"
      :duration="2000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 确认删除 -->
  <uni-popup ref="alertDialog" type="bottom" :is-mask-click="false">
    <view class="dataList1">
      <view class="addItemTitle1">
        <view class="contacts1">确认删除</view>
        <view class="loginInfo1">是否确定当前专利集下面的专利？</view>
        <view class="affirm1">
          <view class="" @click="deletePatent(false)">取消</view>
          <view class="solid1" @click="deletePatent(true)">确认</view>
        </view>
      </view>
    </view>
  </uni-popup>
  <!-- 弹窗 -->
  <uni-popup ref="popup" type="bottom" :mask-click="true" :safe-area="true">
    <view class="dataList">
      <view class="addItemTitle">专利集名称</view>
      <!-- <view class="fenxiang">
        <text class="iconfont icon-zhuanfa"></text>
        <view @click="addDataList">分享</view>
      </view> -->
      <view class="fenxiang">
        <text class="iconfont icon-lianjie"></text>
        <view @click="upDataItem">{{ rezlGroup.status == 1 ? "取消共享" : "共享" }}</view>
      </view>
    </view>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="message1" type="message">
    <uni-popup-message
      type="error"
      message="当前专利集未添加专利，请添加专利后共享！"
      :duration="2000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="操作成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { inject, reactive, toRefs, ref } from "vue";
import {
  onLoad,
  onShow,
  onPullDownRefresh,
  onReachBottom,
  onShareAppMessage,
} from "@dcloudio/uni-app";
const $url = inject("$url");
const $imgSrc = inject("$imgSrc");
let data = reactive({
  userInfo: {},
  dataList: [],
  rezlGroup: {},
  id: "",
  page: 1,
  checkAll: false,
  isCheck: [],
  ids: [],
  total: 0,
  isShow: false,
  itemId: "",
  status: "",
  img: "",
});
let message1 = ref();
let success = ref();
let popup = ref();
let message = ref();
let alertDialog = ref();
let { dataList, rezlGroup, checkAll, isCheck, total, isShow, img } = toRefs(data);
const open = (id, status, name) => {
  data.itemId = id;
  popup.value.open("button-text");
};
const toUserInfo = () => {
  uni.navigateTo({
    url: `/pages/userInfoDetile/userInfoDetile?id=${data.rezlGroup.sysUser.ID}&isOk=0`,
  });
};
const upDataItem = () => {
  if (data.dataList.length == 0) {
    message1.value.open();
    popup.value.close();
    return;
  }
  uni.request({
    url: $url + `/zlGroup/shelf`,
    method: "PUT",
    timeout: 6000,
    header: {
      "x-token": data.userInfo.token,
    },
    data: {
      ids: [data.rezlGroup.ID],
      status: data.rezlGroup.status == 1 ? 0 : 1,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      data.dataList = [];
      uni.request({
        url: $url + `/base/findZlGroup?ID=${data.id}`,
        method: "GET",
        timeout: 6000,
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          data.rezlGroup = res.data.data.rezlGroup;
        },
      });
      updataList();
      popup.value.close();
      success.value.open();
    },
  });
};
onLoad(item=>{
  data.id = item.id * 1;
})
onShow(() => {
  data.page = 1
  data.img = $imgSrc;
  data.dataList = [];
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      if (res.data.token?.length > 1) {
        data.userInfo = res.data;
      }

      uni.request({
        url: $url + `/base/findZlGroup?ID=${data.id}`,
        method: "GET",
        timeout: 6000,
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          data.rezlGroup = res.data.data.rezlGroup;
          updataList();
        },
      });
    },
  });
});
onShareAppMessage((res) => {
  return {
    title: data.rezlGroup.name, //标题
    path: `/pages/creamDetails/index?id=${data.id}`, //可以指定动态路径
    imageUrl: data.rezlGroup.img, //分享图
    desc: data.rezlGroup.desc,
  };
});
const isOk = () => {
  alertDialog.value.open();
};
onPullDownRefresh(() => {
  data.dataList = [];
  data.page = 1;
  updataList();
  uni.stopPullDownRefresh();
});
onReachBottom(() => {
  data.page = data.page + 1;
  updataList();
});
const toPatentDetile = (id) => {
  uni.navigateTo({
    url: `/pages/patentDetails/index?id=${id}&type=1`,
  });
};
const isCheckAll = () => {
  data.checkAll = !data.checkAll;
  if (data.checkAll) {
    data.isCheck = data.isCheck.map((item) => {
      return true;
    });
  } else {
    data.isCheck = data.isCheck.map((item) => {
      return false;
    });
  }
};
const isCheckOk = (e) => {
  data.isCheck[e] = !data.isCheck[e];
  if (!data.isCheck.includes(false)) {
    data.checkAll = true;
  } else {
    data.checkAll = false;
  }
};
const deletePatent = (bool) => {
  if (bool) {
    data.ids = [];
    if (!data.isCheck.includes(true)) {
      message.value.open("warn");
      alertDialog.value.close();
    } else {
      data.isCheck.map((item, index) => {
        if (item) {
          data.ids.push(data.dataList[index].ID);
        }
      });

      uni.request({
        url: $url + `/zlCollect/deleteZlCollectByIds`,
        method: "DELETE",
        timeout: 6000,
        data: { ids: data.ids },
        header: {
          "x-token": data.userInfo.token,
        },
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          flage.value = false;
          data.dataList = [];
          data.page = 1;
          updataList();
          alertDialog.value.close();
        },
      });
    }
  } else {
    alertDialog.value.close();
  }
};
const updataList = () => {
  uni.request({
    url: $url + `/base/getZlCollectList?page=${data.page}&pageSize=10&groupId=${data.id}`,
    method: "GET",
    timeout: 6000,
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      data.total = res.data.data.total;
      data.checkAll = false;
      res.data.data.list.map((item) => {
        data.dataList.push(item);
        data.isCheck.push(false);
      });
    },
  });
};
let flage = ref(false);
const checkFlage = (bool) => {
  if (!bool) {
    data.checkAll = false;
  }
  flage.value = bool;
};
const toAddPatentCream = () => {
  uni.navigateTo({
    url: `/pages/personal/myDataList/addPatentCrean/index?id=${data.id}`,
  });
};
</script>

<style scoped>
.part {
  margin-right: 5rpx;
  width: 92rpx;
  padding: 10rpx;
  background: #0ea27e;
  border-radius: 7rpx;
  font-size: 22rpx;
  text-align: center;
  line-height: 27rpx;
  font-weight: 400;
  color: #ffffff;
}
.part {
  margin-right: 5rpx;
  width: 92rpx;
  padding: 10rpx;
  background: #0ea27e;
  border-radius: 7rpx;
  font-size: 22rpx;
  text-align: center;
  line-height: 27rpx;
  font-weight: 400;
  color: #ffffff;
}
.addPatent {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 67rpx;
  width: 380rpx;
  height: 80rpx;
  border-radius: 40rpx;
  border: 2rpx solid #1677ff;
  font-size: 25rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1677ff;
  margin-bottom: 30rpx;
}
.editImfo {
  flex: 1 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.dataList {
  padding-bottom: 1rpx;
  width: 100%;
  background: #ffffff;
  border-radius: 11rpx 11rpx 0rpx 0rpx;
}
.fenxiang {
  display: flex;
  align-items: center;
  padding-left: 29rpx;
  margin-bottom: 47rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.fenxiang text {
  color: #666666;
}
.fenxiang view {
  margin-left: 45rpx;
}
.partake {
  margin-right: 5rpx;
  width: 92rpx;
  height: 27rpx;
  background: #1677ff;
  box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(227, 227, 227, 0.5);
  border-radius: 7rpx;
  font-size: 22rpx;
  text-align: center;
  line-height: 27rpx;
  font-weight: 400;
  color: #ffffff;
}

.addItemTitle {
  display: flex;
  align-items: center;
  padding-left: 27rpx;
  margin-bottom: 24rpx;
  height: 108rpx;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
  border-bottom: 1rpx solid #dfdfdf;
}
.editImfo .iconfont {
  margin-right: 15rpx;
}
.patentInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 109rpx;
  padding: 0 27rpx;
  background: #edf4ff;
  border-radius: 14rpx 14rpx 0rpx 0rpx;
}
.noheight {
  height: 0;
  display: none !important;
}
.creamDetails {
  background: #1677ff;
}
.creamInfo {
  display: flex;
  padding: 30rpx 27rpx 32rpx 27rpx;
}
.creamInfo image {
  margin-top: 10rpx;
  width: 217rpx;
  height: 217rpx;
  background: #d8d8d8;
  border-radius: 11rpx;
  margin-right: 24rpx;
}
.creamAuthor {
  display: flex;
  flex-direction: column;
}
.authorTitle .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 430rpx;
}
.authorTitle {
  display: flex;
  align-items: center;
  width: 480rpx;
  font-size: 33rpx;
  font-weight: 600;
  color: #ffffff;
}
.creamUseName {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.creamUseName image {
  margin: 0;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  color: #eeeeee;
}
.creamTime {
  margin-top: 10rpx;
  white-space: pre-wrap;
  width: 96%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #ffffff;
  font-size: 25rpx;
  font-weight: 400;
}

.creamSum .myCr,
.myCr {
  width: 217rpx;
  height: 80rpx;
  background: #3187ff;
  border-radius: 40rpx;
  color: #539bff !important;
}
.creamUseName view {
  font-size: 25rpx;
  font-weight: 400;
  color: #eeeeee;
  margin: 0 10rpx 0 8rpx;
}
.creamUseName button {
  margin: 0;
  width: 91rpx;
  height: 36rpx;
  line-height: 36rpx;
  background: #599eff;
  border-radius: 18rpx;
  margin: 0;
  font-size: 22rpx;
  font-weight: 400;
  color: #ffffff;
  padding: 0;
}
.creamSum {
  font-size: 25rpx;
  font-weight: 400;
  color: #eeeeee;
  padding: 0 27rpx;
}
.creamBtn {
  display: flex;
  align-items: center;
}
.creamBtn button {
  width: 217rpx;
  height: 80rpx;
  background: #599eff;
  border-radius: 40rpx;
  margin: 30rpx 21rpx 55rpx 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eeeeee;
}
.creamBtn .iconfont {
  margin-right: 10rpx;
  display: inline-block;
}
/* 专利信息 */
.patentOpt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  border-radius: 14rpx 14rpx 0rpx 0rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #666666;
  background-color: #fff;
}
.patentInfoList text {
  font-size: 33rpx;
  font-weight: 600;
  color: #333333;
}
.creamList {
  background-color: #ffffff;
  padding: 32rpx 27rpx 50rpx 27rpx;
}
/* 展示列表 */
.serchItem {
  display: flex;
  align-items: center;
  margin-top: 32rpx;
}
.checkCream {
  width: 40rpx;
  margin-right: 32rpx;
}
.serchItemIndex {
  margin-right: 20rpx;
  width: 50rpx;
  color: #999;
}
.patentTitle {
  margin-top: 7rpx;
  width: 400rpx;
  height: 40rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patentClassify {
  margin-top: 9rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #888888;
}
/* 悬浮窗 */
.checkAllCream {
  position: fixed;
  left: 0;
  bottom: -145rpx;
  width: 100%;
  height: 145rpx;
  box-shadow: 0rpx -4rpx 11rpx 0rpx rgba(236, 236, 236, 0.5);
}
.checkAll {
  position: fixed;
  left: 0;
  bottom: 0rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 27rpx;
  width: 696rpx;
  height: 145rpx;
  background: #ffffff;
  box-shadow: 0rpx -4rpx 11rpx 0rpx rgba(236, 236, 236, 0.5);
}
.isCheckAll {
  font-size: 29rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  display: flex;
  align-items: center;
}
.checkAll button {
  width: 139rpx;
  height: 53rpx;
  box-shadow: 0rpx -4rpx 11rpx 0rpx rgba(236, 236, 236, 0.5);
  border-radius: 26rpx;
  border: 2rpx solid #1677ff;
  font-size: 29rpx;
  font-weight: 400;
  color: #1677ff;
  line-height: 40rpx;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dataList1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(153, 153, 153, 0.8);
}
.addItemTitle1 {
  width: 507rpx;
  padding-top: 21rpx;
  background: #ffffff;
  border-radius: 14rpx;
}
.contacts1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.affirm1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 90rpx;
  border-top: 1px solid #e5e5e5;
}
.affirm1 view {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solid1 {
  color: #1677ff;
  border-left: 1rpx solid #e5e5e5;
}
.loginInfo1 {
  margin: 30rpx;
}
</style>
